.user-box{ margin: 0 auto; width: 1200px; min-height: 500px; margin-top: 40px; padding: 20px 0 20px 0; }   
.user-box>div{ float: left; text-align: center; background-color: #ffffff; }   
.user-box>.left{ width: 200px; margin-right: 20px; padding: 10px; border-radius: 4px; box-shadow: #efeaea 1px 2px 2px;  }   
.user-box>.left>.name{ text-align: center; margin-bottom: 10px; border-bottom: solid #ccc 1px;  }
.user-box>.left>.name>p{ margin-bottom: 20px; margin-top: 20px; font-size: 20px; font-weight: bold; }
.user-box>.left>.name>span{ display: inline-block; margin: 10px; width: 100px; height: 100px; background-color: #d7d7d7; border-radius: 50px; }
.user-box>.left>ul>li{ height: 40px; line-height: 40px; cursor: pointer; box-sizing: border-box; }
.user-box>.left>ul>li a{ display: inline-block; text-decoration:none;  width: 100%; height: 100%; }
.user-box>.left>ul>li a:hover{ color: #fff; background-color: #72b4f6; }
.user-box>.left>ul>li .active{ background-color: #6096f8; text-decoration:none; color: #ffffff; }

.user-box>.right{ width: 980px; min-height: 500px; padding: 20px 30px; box-sizing: border-box; }   
.user-box>.right>.history-order>.search-box{  padding-bottom: 20px; margin-bottom: 10px; border-bottom: solid #ccc 1px; text-align: left; }
.user-box>.right>.history-order>.search-box .type{ width: 120px; margin-right: 10px; }
.user-box>.right>.history-order>.search-box input{ display: inline-block; width: 200px; }
.user-box>.right>.history-order>.search-box .fonts-r{ margin-right: 20px; }
.user-box>.right>.history-order>.search-box .fonts-l{ margin-left : 20px; }
.user-box>.right>.history-order>.search-box button{  background-color: #ffb200; color: #ffffff; border-color: #ffb200; }
.user-box>.right>.history-order>.items>.item{ margin-bottom: 10px; padding: 10px; box-shadow: #efeaea 1px 1px 3px; border-radius: 5px; border-left: solid #ffb200 5px;  }
.user-box>.right>.history-order>.items>.item>div{ float: left; width: 250px; height: 77px; padding-left: 15px; border-right: solid #ccc 1px; box-sizing: border-box; text-align: left;  }
.user-box>.right>.history-order>.items>.item>div:last-child{ border-right: solid transparent 1px; text-align: center; }
.user-box>.right>.history-order>.items>.item>.opt{ width: 140px; }
.user-box>.right>.history-order>.items>.item>.opt>p{ margin-top: 10px; }
.user-box>.right>.history-order>.items>.null{ text-align: center; margin-top: 20px; }
.user-box>.right>.personal-inf{ text-align: left; }
.user-box>.right>.personal-inf>.contral{ padding-bottom: 20px; border-bottom: solid #ccc 1px; margin-bottom: 30px; }
.user-box>.right>.personal-inf>.contral button{ margin-right: 20px; }
.user-box>.right>.personal-inf>.contral .save{ background-color: #ffb200; border-color: #ffb200; color: #fff; }
.user-box>.right>.change-password{ margin-top: 50px; }
.user-box:after,.user-box>.right>.history-order>.items>div:after{display: block; content:""; width: 0; height: 0; overflow: hidden; clear: both;}

